import React, {Component} from 'react';
import {View,Text,StyleSheet,TouchableOpacity,ActivityIndicator} from 'react-native';
import NavigationBar from "../common/NavigationBar";
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import Feather from 'react-native-vector-icons/Feather';
import { WebView } from 'react-native-webview';

const THEME_COLOR = '#678';

// 详情页
class DetailPage extends Component {
  render() {
    let {full_name,html_url} = this.props.route.params.item;

    let navigationBar = <NavigationBar
      title={full_name}
      style={{backgroundColor:THEME_COLOR}}
      leftButton={this.leftButton()}
      rightButton={this.rightButton()}
      titleLayoutStyle={{paddingLeft:20,paddingRight:60}}
    />;

    return (
      <View style={styles.container}>
        {navigationBar}
        <WebView
          startInLoadingState={true}
          renderLoading={this.load}
          source={{uri:html_url}}
        />
      </View>
    );
  }

  // 顶部导航栏左侧按钮
  leftButton = () => {
    return <TouchableOpacity onPress={this.goBack} style={styles.leftButton}>
      <Ionicons name={'ios-arrow-back'} size={26} color={'#fff'}/>
    </TouchableOpacity>
  };

  // 顶部导航栏左侧按钮返回事件
  goBack = () => {
    let {navigation} = this.props;
    navigation.goBack()
  };

  // 顶部导航栏右侧按钮
  rightButton = () => {
    return <View style={styles.rightButtonBox}>
      <TouchableOpacity style={styles.starBox}>
        <Feather name={'star'} size={26} color={'white'}/>
      </TouchableOpacity>
      <TouchableOpacity>
        <MaterialIcons name={'share'} size={26} color={'white'}/>
      </TouchableOpacity>
    </View>
  };

  // webView加载
  load = () => {
    return <View style={styles.load}>
      <ActivityIndicator size={30} color={'#999'}/>
      <Text>正在加载中...</Text>
    </View>
  };
}

const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  leftButton:{
    marginLeft: 15
  },
  rightButtonBox:{
    flexDirection:'row',
    marginRight: 15,
  },
  starBox:{
    marginRight: 10
  },
  load:{
    flex:1,
    alignItems:'center',
  }
});

export default DetailPage;